<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Data Admin Presentation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />

</head>

<body>
	<div id="main_body">
		<style>
#byte_content {
	margin: 5px 0;
	max-height: 100px;
	overflow-y: auto;
	overflow-x: hidden;
}

#byte_range {
	margin-top: 5px;
}
</style>

		<input type="file" id="files" name="file" /> Read bytes: <span
			class="readBytesButtons">
			<button data-startbyte="0" data-endbyte="4">1-5</button>
			<button data-startbyte="5" data-endbyte="14">6-15</button>
			<button data-startbyte="6" data-endbyte="7">7-8</button>
			<button>entire file</button>
		</span>
		<div id="byte_range"></div>
		<div id="byte_content"></div>

		<script>
  function readBlob(opt_startByte, opt_stopByte) {

    var files = document.getElementById('files').files;
    if (!files.length) {
      alert('Please select a file!');
      return;
    }

    var file = files[0];
    var start = parseInt(opt_startByte) || 0;
    var stop = parseInt(opt_stopByte) || file.size - 1;

    var reader = new FileReader();

    // If we use onloadend, we need to check the readyState.
    reader.onloadend = function(evt) {
      if (evt.target.readyState == FileReader.DONE) { // DONE == 2
        document.getElementById('byte_content').textContent = evt.target.result;
        document.getElementById('byte_range').textContent = 
            ['Read bytes: ', start + 1, ' - ', stop + 1,
             ' of ', file.size, ' byte file'].join('');
      }
    };

    var blob = file.slice(start, stop + 1);
    reader.readAsBinaryString(blob);
  }
  
  document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
    if (evt.target.tagName.toLowerCase() == 'button') {
      var startByte = evt.target.getAttribute('data-startbyte');
      var endByte = evt.target.getAttribute('data-endbyte');
      readBlob(startByte, endByte);
    }
  }, false);
</script>


		<div class='span9'>
			<form id='fileupload' method='POST' enctype='multipart/form-data'>
				<span class='btn btn-small btn-primary fileinput-button'><i
					class='icon-plus icon-white'></i><span>Add files...</span><input
					type='file' name='upload' multiple></span><input type='hidden'
					id='type' name='type' /><input type='hidden' id='priority'
					name='priority' />
			</form>
			<div class='span3 fileupload-progress fade'>
			<div id='progress'
				class='progress progress-success progress-striped active'
				role='progressbar' aria-valuemin='0' aria-valuemax='100'>
				<div class='bar' style='width: 0%;'></div>
			</div>
			</div>
		</div>
</body>
</html>